<template>
  <el-dialog
    v-if="load"
    :close-on-click-modal="false"
    title="添加sku"
    v-model="visible"
    class="full"
    append-to-body
    align-center
    width="1200px"
    @close="handleClose"
  >
    <div class="pt-2 h-full">
      <VTable ref="tableRef" v-bind="tableOptions">
        <template #form="{ form }">
          <VGroup>
            <el-select v-model="form.supplier.type" style="width: 120px">
              <el-option label="sku" value="sku"></el-option>
              <el-option label="自定义SKU" value="custom_sku"></el-option>
            </el-select>
            <VBatchInput
              v-model="form.supplier.value"
              clearable
              class="w-40"
              @search="query"
            />
          </VGroup>
          <el-input
            v-model="form.sku_cn_title"
            placeholder="产品名称"
            style="width: 180px"
            clearable
          ></el-input>
          <el-select
            v-model="form.is_new"
            style="width: 120px"
            placeholder="是否新品"
            multiple
            clearable
          >
            <el-option label="否" :value="1"></el-option>
            <el-option label="是" :value="2"></el-option>
          </el-select>
          <VCascader
            v-model="form.attribute_id"
            placeholder="产品分类"
            type="2"
            filterable
            clearable
            checkStrictly
            class="w-40"
          />
        </template>
        <template #toolbar>
          <div class="h-3"></div>
        </template>
      </VTable>
    </div>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="submit"
        >选 择</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import api from "./api";
import { ElMessage } from "element-plus";

const props = defineProps({
  validator: { type: Function, default: async () => false },
});
const load = ref(false);
const visible = ref(false);
let loadings = reactive({});
const tableRef = ref();
// 查询
const query = () => {
  tableRef?.value.query();
};

// 列表配置
const tableOptions = reactive({
  size: "small",
  rowConfig: { height: 90 },
  showHeaderOverflow: true,
  formConfig: {
    data: {
      supplier: { type: "sku" },
    },
  },
  columns: [
    { type: "checkbox", fixed: "left", width: 40 },
    {
      title: "图片",
      width: 80,
      slots: {
        default: ({ row }) => {
          return <VImage src={row.main_img} />;
        },
      },
    },
    {
      width: 240,
      slots: {
        header: ({ column }) => {
          return "sku信息";
        },
        default: ({ row }) => {
          return (
            <div>
              <VText title="sku" value={row.sku} />
              <VText title="历史sku" value={row.sai_he_sku} />
              <VText title="产品状态" value={row.sku_status_name} />
              <VText title="是否退税" value={row.is_refund_tax_name} />
            </div>
          );
        },
      },
    },
    {
      field: "sku_cn_title",
      title: "产品名称",
      minWidth: 120,
      line: 3,
    },
    {
      field: "attribute_name",
      title: "产品分类",
      minWidth: 100,
      line: 3,
    },
    {
      width: 180,
      slots: {
        header: ({ column }) => {
          return "供应商信息";
        },
        default: ({ row }) => {
          return (
            <div>
              <VText title="供应商" value={row.supplier_name || "-"} />
              <VText title="是否开票" value={row.is_invoice_name} />
            </div>
          );
        },
      },
    },
    {
      width: 140,
      slots: {
        header: ({ column }) => {
          return "采购/开发";
        },
        default: ({ row }) => {
          return (
            <div>
              <VText value={row.purchaser_name} />
              <VText value={row.developer_name} />
            </div>
          );
        },
      },
    },
    {
      field: "is_combination_name",
      title: "是否组合sku",
      width: 100,
      slots: {
        default: ({ row, rowIndex }) => {
          return (
            <div>
              <VText value={row.is_combination_name} />
              {row.combination_data && row.combination_data.length ? (
                <VText title="子sku信息" title-position="top" line="2">
                  <VMore key={rowIndex}>
                    {{
                      default: () =>
                        row.combination_data.map((d) => (
                          <VText value={`${d.sku}*${d.sku_num}`} />
                        )),
                    }}
                  </VMore>
                </VText>
              ) : (
                ""
              )}
            </div>
          );
        },
      },
    },
    {
      field: "remark",
      title: "备注",
      minWidth: 100,
      line: 3,
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page }),
    },
  },
});

const emit = defineEmits(["close", "change"]);

// 打开弹窗
const open = async (selection) => {
  if (!load.value) {
    load.value = true;
  }
  loadings = reactive({});
  visible.value = true;
  nextTick(() => {
    tableRef.value.resetForm();
    tableRef.value.query();
  });
};
// 关闭弹窗
const close = () => {
  visible.value = false;
};

const handleClose = () => {
  emit("close");
};
// 提交
const submit = async () => {
  const selection = tableRef.value.$table.getCheckboxRecords();
  if (!selection.length) {
    ElMessage.warning("请先选择行");
    return;
  }
  const { validator } = props;
  if (validator) {
    const msg = await validator(selection);
    if (msg) return;
  }
  emit("change", selection);
  close();
};

defineExpose({ open });
</script>
